<style>
    .content {
        width: 15%;
        float: left;
    }

    .toleft {
        margin-left: 10%;
        overflow: hidden;
    }

</style>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" class="center">
        <div class="webmap">
            <p class="webmaptip">当前位置:</p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">统计管理</a>
            <p class="webmaptip">></p>
            <a href="javascript:;" class="easyui-link" data-options="plain:true">投资统计</a>
        </div>
        <div class="querybycon">
            <form id="query">
                <div class="queryinfo">
                    <div class="db"><span style="margin-right: 20px">时间</span><input name="startDate" id="startDate"
                                                                                     class="easyui-datetimebox">
                        -
                        <input name="endDate" id="endDate" class="easyui-datetimebox">
                    </div>
                    <div class="query">
                        <a id="querybtn" href="javascript:;" class="easyui-linkbutton  "
                           data-options="iconCls:'fa fa-search'"></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="querybtn">
            <a id="exportbtn" href="javascript:;" class="easyui-linkbutton  "
               data-options="iconCls:''">导出</a>
            <div style="visibility: hidden;">aa</div>
        </div>
    </div>
    <div data-options="region:'center'" class="center">
        <div class="toleft" style="margin-top: 30px;">
            <div class="content">
                <span>累计投资金额</span> <a href="#" title="撮合成功的融资项目中投资总金额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>投资总笔数</span> <a href="#" title="撮合成功的融资项目中投资总笔数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总投资人数</span> <a href="#" title="撮合成功的融资项目中投资人总数" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>总投资收益</span> <a href="#" title="投资人收到的利息总额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>用户总冻结金额</span> <a href="#" title="现在投资用户的总冻结金额" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
            <div class="content">
                <span>人均累计投资金额</span> <a href="#" title="交易总额与投资人总数之比" class="easyui-tooltip"><img
                    src="static/image/tip.png"></a>
            </div>
        </div>

        <div class="toleft" style="margin-top: 20px;">
            <div class="content" id="investAmount">
                ￥0.00
            </div>
            <div class="content" id="investNum">
                0笔
            </div>
            <div class="content" id="investorNum">
                0人
            </div>
            <div class="content" id="investments">
                ￥0.00
            </div>
            <div class="content" id="frozenAmount">
                ￥0.00
            </div>
            <div class="content" id="perInvestmentAmount">
                ￥0.00
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.get("/investstatistics/list", {startDate: "", endDate: ""}, function (msg) {
            if (msg.state == "SUCCESS") {
                console.log(msg)
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    })
    //查看详情
    $("#querybtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        $.get("/investstatistics/list", {startDate: startDate, endDate: endDate}, function (msg) {
            if (msg.state == "SUCCESS") {
                getHtml(msg);
            } else {
                $.messager.show({
                    title: '操作提示',
                    msg: msg.message,
                    timeout: 2000,
                    showType: 'slide'
                });
            }
        })
    });

    //导出excel
    $("#exportbtn").click(function () {
        var startDate = $('#startDate').datetimebox('getValue');
        var endDate = $('#endDate').datetimebox('getValue');
        window.open('/investstatistics/export?startDate=' + startDate + '&endDate=' + endDate);
    });
    function getHtml(msg) {
        if (msg.data != null && msg.data != undefined) {
            $("#investAmount").html('￥' + formatNumber(msg.data.investAmount, 2));
            $("#investNum").html(msg.data.investNum + " 笔");
            $("#investorNum").html(msg.data.investorNum + " 人");
            $("#investments").html('￥' + formatNumber(msg.data.investments, 2));
            $("#frozenAmount").html('￥' + formatNumber(msg.data.frozenAmount, 2));
            $("#perInvestmentAmount").html('￥' + formatNumber(msg.data.perInvestmentAmount, 2));


        } else {
            $("#investAmount").html('￥0.00');
            $("#investNum").html("0笔");
            $("#investorNum").html("0人");
            $("#investments").html('￥0.00');
            $("#frozenAmount").html('￥0.00');
            $("#perInvestmentAmount").html('￥0.00');
        }
    }
    function formatNumber(value, fixed) {
        var number = Number(value);
        if (isNaN(number)) {
            return '';
        } else {
            return number.toFixed(2);
        }
    }

</script>
